<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吉大树洞 - 发表话题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="background"></div>
    <div class="container">
        <div class="form-container">
            <h1>发表话题</h1>
            <form id="postTopicForm">
                <label for="title">标题:</label>
                <input type="text" id="title" name="title" required>

                <label for="content">内容:</label>
                <textarea id="content" name="content" rows="10" required></textarea>

                <button type="submit">发表</button>
            </form>
            <p><a href="topics.html">返回话题列表</a></p>
        </div>
    </div>

    <script>
        // 发表话题逻辑
        document.getElementById('postTopicForm').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取用户输入
            const title = document.getElementById('title').value;
            const content = document.getElementById('content').value;

            // 创建话题对象
            const topic = {
                id: Date.now(), // 使用时间戳作为唯一 ID
                title,
                content,
                timestamp: new Date().toLocaleString() // 添加时间戳
            };

            // 从 localStorage 获取话题列表
            let topics = JSON.parse(localStorage.getItem('topics')) || [];

            // 将新话题添加到话题列表
            topics.push(topic);

            // 将更新后的话题列表存储到 localStorage
            localStorage.setItem('topics', JSON.stringify(topics));

            alert('话题发表成功！');
            window.location.href = 'topics.html'; // 跳转到话题页面
        });
    </script>
</body>
</html>